<template>
    <div class="views">
        <h3 class="title">
            <span>{{esbsystem.systemName}}服务视图</span>
            <span class="time">数据更新时间:{{gettime}}</span>
        </h3>

        <div class="wapper">
            <div class="info">
                <div class="top-menu">
                    <draggable v-model="menuList" @remove="removeHandle" :options="dragOptions">
                        <transition-group tag="div" id="menulist" class="clearFix">
                            <div class="item"
                                 :key="index"
                                 :class="{'act': mAct == item.treeId}"
                                 v-for="(item, index) in menuList"
                                 @click="itemClick(item.treeId, systemId)">
                                <div :class="item.icon"></div>
                                <p class="text">{{item.treeName}}</p>
                                <span v-if="!(item.exceptionCount == 0) && !(item.exceptionCount == null)" class="nums">{{item.exceptionCount}}</span>
                                <!--<span  class="nums">0</span>-->
                            </div>
                        </transition-group>
                    </draggable>
                </div>
                <div class="view-wrapper">
                    <div class="check">
                        <v-sub-action :treeId="treeId"  :systemId="systemId" ></v-sub-action>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>


    import draggable from 'vuedraggable';
    import vSubAction from '../center/SubAction';
    import { get, post } from '@/utils/request.js';

    export default {
        data() {
            return {
                treeData: [

                ],

                defaultProps: {
                    children: 'children',
                    label: 'name',
                    isLeaf: 'haschildren'
                },
                menuList: [

                ],
                systemId: null,
                treeId:null,
                expandedKeys: [],
                firstExpand: true,
                treeExcep: {},
                exceptions: {},
                esbsystem: {},
                chosenItem: null,
                mAct: null,
                gettime: null,
                dragOptions: {
                    animation: 120,
                    scroll: true,
                    group: 'sortlist',
                    ghostClass: 'ghost-style'
                },
                todo: [
                    {
                        id: 1,
                        content: '开发图表组件'
                    },
                    {
                        id: 2,
                        content: '开发拖拽组件'
                    },
                    {
                        id: 3,
                        content: '开发权限测试组件'
                    }
                ]
            };
        },
        created: function () {
            this.getTime();
            this.getBusinessType(this.$route.params.id);
            this.getSystem(this.$route.params.id);
        },
        mounted:function(){

        },
        components: {
            vSubAction,
            //vQueryLike,
            draggable
        },
        methods: {
            getSystem(systemId){

                let that = this;
                get('/esbview/esb-system/info/' + systemId, '').then(res => {
                    this.esbsystem = res.esbsystem;
                   // this.systemId = res.esbsystem.id;

                });
            },
            /*nodeClick(code) {
                let that = this;
                get('/esbview/v-workflow/list/' + code, '').then(res => {
                    this.menuList = res.list;
                    this.mAct = 0;

                });
            },*/
            getBusinessType(code) {
                let that = this;
                /*get('/esbview/eop-api-tree/infoBySystemID/' + code, '').then(res => {

                    this.menuList = res.businessTypeList.businessType;
                    this.systemId = res.businessTypeList.systemId;
                    this.mAct = this.menuList[0].treeId;

                    this.itemClick(this.mAct, this.systemId);

                });*/

                get('/esbview/eop-api-tree/treeInfoBySystemID/' + code, '').then(res => {
                    console.log(res);
                    this.menuList = res.eopApiTreeVoList;
                    this.systemId = this.esbsystem.id;
                    this.mAct = this.menuList[0].treeId;
                   // alert("this.mAct="+this.mAct+",this.systemId="+this.systemId);
                    this.itemClick(this.mAct, this.systemId);

                });
            },
            expandTree(node) {
                this.expandedKeys.push(node.id);
            },
            itemClick(treeId, systemId) {
                var that = this;
                that.mAct = treeId;
                that.treeId = treeId;
                that.systemId = systemId;
            },
            loadNode(node, resolve) {
                let parId = node.level === 0 ? 0 : node.data.id;
                if (node.data.haschildren == 0) {
                    return resolve([]);
                }
                if (parId == 0) {
                    get('/esbview/v-workflow-tree/exceptions', '').then(res => {
                        this.treeExcep = res.exceptions;
                        if (this.treeExcep == undefined) {
                            this.treeExcep = {};
                        }
                    });
                }
                get('/esbview/v-workflow-tree/listNode/' + parId, '').then(res => {
                    resolve(res.list);
                    // 第一次加载页面时，选中第一个非叶子节点
                    if (this.firstExpand) {
                        if (res.list != null && res.list.length > 0) {
                            this.expandTree(res.list[0]);
                            this.nodeClick(res.list[0]);
                            this.$refs.viewTree.setCurrentKey(res.list[0].id);
                        } else {
                            this.firstExpand = false;
                        }
                    }
                });
            },
            removeHandle(event) {
                console.log(event);
                this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
            },
            getTime(){
                var that = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                that.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            },
        }
    };
</script>

<style scoped>
    .views .title {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #d4d4d4;
        font-size: 16px;
        font-weight: bold;
        padding: 0 20px;
        color: #333;
    }
    .views .time {
        flex: 1;
        text-align: right;
    }
    .wapper {
        display: flex;
        margin: 20px;
        position: relative;
    }

    .wapper .info {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .top-menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .top-menu .item {
        padding-top: 13px;
        width: 75px;
        height: 62px;
        font-size: 12px;
        text-align: center;
        border-radius: 5px;
        background-color: #f7f9fd;
        cursor: pointer;
        position: relative;
        float: left;
        margin-right: 20px;
    }
    .top-menu .item .nums {
        position: absolute;
        top: -6px;
        right: -15px;
        border: 1px solid #fff;
        border-radius: 15px;
        color: #fff;
        width: 25px;
        height: 15px;
        line-height: 17px;
        font-size: 12px;
        padding-left: 10px;
        background: url(../../../assets/img/attention-fff.png) 3px 50% no-repeat #ed795a;
        background-size: 13px;
    }

    .top-menu .act {
        background-color: #ed795a;
    }
    .top-menu .item .text {
        margin-top: 12px;
    }
    .top-menu .act .text {
        color: #fff;
    }
    .view-wrapper {
        border: 1px solid #fce8e3;
        margin-top: 20px;
        position: relative;
    }
    .check {
        background-color: #fffdfc;
    }
</style>